<template>
    <div class="full-bg" :style="{ backgroundImage: `url(${getImage('footer/nav-bottom.png')})` }">
        <div class="body-m footer-body">
            <div class="footer-group">
                <div class="footer-connected">
                    <img class="footer-logo" :src="getImage('footer/logo.png')" alt="">
                    <div class="footer-hint">Stay connected</div>
                    <!-- <div class="connected-icons">
                    <img :src="getImage('footer/ins.png')" alt="">
                    <img :src="getImage('footer/youtube.png')" alt="">
                </div> -->

                </div>
                <div class="footer-item" v-for="(item, idx) in items" :key="idx">
                    <div class="footer-item-title">{{ item.title }}</div>

                    <ul>
                        <li v-for="(cell, idx) in item.cells" :key="idx" @click="push(cell)">
                            <el-link :underline="false" @click="push(cell)">{{ cell.title }}</el-link>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-bottom-msg">
                    <div class="first-msg">Honeybee is a trade name of Honeybee Inc. (Canada) and Honeybee Inc.
                        (Canada)</div>
                    <div>
                        Honeybee Inc. is a FINTRAC registered money service business with MSB Registration Number
                        M23125877. </div>
                    <div>Honeybee Inc. is a FINTRAC registered money service business with MSB Registration Number
                        C100000431.</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="FooterView">
import { useRouter } from 'vue-router';

const router = useRouter()

interface FooterCell {
    title: string;
    name?: string;
    heavy?: boolean;
}

interface FooterItem {
    title: string;
    cells: FooterCell[];
}

const items = [
    {
        title: 'Company',
        cells: [
            { title: 'About Us', name: 'aboutus' },
            { title: 'Careers', name: 'career' },
            { title: 'Contact Us', name: 'contact', heavy: true },
        ]
    },
    {
        title: 'Products',
        cells: [
            { title: 'Virtual Accounts', name: 'virtualAccounts' },
            { title: 'Global Collection & Payout', name: 'globalCollectionPayout' },
            { title: 'Institutional OTC', name: 'otc' },
            { title: 'Investment Opportunities', name: 'investment' },
            { title: 'Stablecoin Checkout', name: 'stablecoinCheckout' },
            { title: 'Card', name: 'card' }
        ]
    },
    {
        title: 'Use cases',
        cells: [
            { title: 'Corporate Treasury Management', name: 'treasury' },
            { title: 'Import & Export companies', name: 'importExport' },
            { title: 'Professional Services', name: 'services' },
            { title: 'Venture Capital & Investment Funds', name: 'ventureCapitalInvestmentFunds' },
            { title: 'Crypto-native', name: 'cryptoNative' },
        ]
    },
    {
        title: 'Resources',
        cells: [
            // { title: 'News' },
            // { title: 'Blog' },
            { title: 'Legal and Compliance', name: 'contact', heavy: true },
        ]
    },
]

function push(item: FooterCell) {
    let name = (item as FooterCell).name
    if (name) {
        router.push({ name })
    }
}

</script>

<style scoped lang="scss">
.footer-body {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 4rem 0;
    color: white;
}

.footer-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;

    .footer-connected {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        .footer-logo {
            width: 100px;
            object-fit: cover;
        }

        .footer-hint {
            font-weight: bold;
        }

        .connected-icons {
            display: flex;
            gap: 10px;

            img {
                width: 45px;
            }
        }
    }

    .footer-item-title {
        font-weight: bold;
        margin-bottom: 1rem;
    }

    ul {
        padding-left: 1rem;
        list-style-type: disc;

        .footer-cell-heavy {
            font-weight: bold;
        }
    }
}

.footer-bottom {
    display: flex;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;

    div {
        font-size: 0.8rem;
    }

    .first-msg {
        padding-bottom: 1rem;
    }
}

.el-link {
    color: inherit;
}

@media (max-width: 650px) {
    .footer-body {
        align-items: center;
        padding: 2rem 0;
        justify-content: space-evenly;
    }

    .footer-group {
        flex-direction: column;
        gap: 2rem;
    }
}
</style>